﻿
@{
    ViewBag.Title = "小杨工具库";
    var openkey = Request.QueryString["key"].xTrim().xFromSafeBase64().xFromBase64();
    var currentUser = YYS.Controllers.pcController.v3getCurrentUser(openkey,0);
    if (currentUser.HasError)
    {
        Html.RenderPartial("Result", new YYS.ResultModel() { IsPart = 1, Icon = 5, Msg = currentUser.Error, Title = "提示", AutoURL = Url.Content("~/pc/Login"), AutoTimeout = 3 });
        return;
    };
    if (currentUser.Obj == null)
    {
        Html.RenderPartial("Result", new YYS.ResultModel() { IsPart = 1, Icon = 5, Msg = "会话已超时.exp", Title = "提示", AutoURL = Url.Content("~/pc/Login"), AutoTimeout = 3 });
        return;
    };
}
@section css{
    <link href="~/Content/index/vue/vxe-table/style.css" rel="stylesheet" />
}
@section style{
    <style type="text/css">
        /*.tabs-menu .el-tabs__item { padding: 0;}*/
        .tabs-menu .el-tabs__header {
            margin: 0;
            border-bottom: none;
        }

        .tabs-menu .el-tabs__content {
            display: none;
        }

        .tabs-menu .el-tabs--card > .el-tabs__header .el-tabs__nav {
            border-top: none;
            border-bottom: none;
        }

        .left-side {
            width: 200px;
        }

            .left-side.cola {
                width: 64px;
                animation: myfirst .15s;
                -webkit-animation: myfirst .15s; /* Safari and Chrome */
            }

        .menu-card .el-card__header {
            padding: 10px 20px;
        }

        .third-link {
            color: rgb(48, 49, 51);
            font-size: 14px;
            text-decoration: none;
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            padding-left: 40px;
        }

        .quick-link {
            text-decoration: none;
            padding: 5px;
            font-size: 13px;
            display: block;
            color: #808080;
            background-color: #FFF;
        }

            .quick-link:hover {
                background-color: #F5F5F6;
            }

        .switch-avatar {
            background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
        }

            .switch-avatar img {
                width: 100%;
            }

        .avatar-bd .cancel-btn {
            position: absolute;
            top: 14px;
            left: 4px;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            display: none;
            color: #fff;
            background: #ff6a00;
        }

            .avatar-bd .cancel-btn span {
                line-height: normal !important;
                text-align: center;
            }

        .avatar-bd:hover .cancel-btn {
            display: flex;
        }

        .gradient-text-one {
            user-select: none;
            color: #ff6a00;
            text-align: center;
            cursor: pointer;
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 2px;
            background-image: -webkit-linear-gradient(left,red,#ff6a00,#009688);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            width: 100px;
            display: block;
        }
        .img-center img{
            width:100%;
        }
    </style>
}
<div id="app" v-cloak class="h100 hidden flex-column bg-greyLight">
    <div class="flex-row bg-white padding-lr-15" style="border-bottom: 1px solid #e6e6e6; height: 60px;">
        <div class="flex-row" style="vertical-align:middle;">
            <el-avatar icon="el-icon-user-solid" src="https://ynz1901.oss-cn-shanghai.aliyuncs.com/main/bear.png" shape="square"
                       style="background-color:transparent;"></el-avatar>
            <span class="size-16 margin-left-6">小杨工具库</span>
        </div>
        <div class="flex-row-fill"></div>
        <el-row type="flex" align="middle">
            <el-avatar class="img-center" icon="el-icon-user-solid" fit="fill" :src="!!optor.imgUrl?optor.imgUrl:'https://ynz1901.oss-cn-shanghai.aliyuncs.com/main/bear.png'"
                       style="background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);">
            </el-avatar>
            <div class="margin-left-6 margin-right-6" style="display:inline-block;">
                <div>
                    {{!!optor?optor.uiName:'登录超时'}}
                </div>
            </div>
        </el-row>
        <el-button type="text" v-on:click="logoff" class="margin-left-15">退出登录</el-button>

    </div>
    <div class="flex-row bg-white tabs-menu margin-bottom-8" style="border-bottom: 1px solid #e6e6e6;">
        <div>
            <el-tabs :value="now.path" type="card" v-on:tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in tabs.slice(0,2)" :closable="false" :name="item.path">
                    <span slot="label"><i :class="{'el-icon-menu':index==0, 'el-icon-s-home':index==1}"></i>{{index==0?'':'主页'}}</span>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="flex-row-fill hidden">
            <el-tabs :value="now.path" type="card" v-on:tab-click="handleClick" v-on:tab-remove="removeTab">
                <template :key="item.path" v-for="(item, index) in tabs.slice(2,tabs.length)">
                    <el-tab-pane closable :label="item.name" :name="item.path"></el-tab-pane>
                </template>
            </el-tabs>
        </div>
    </div>
    <div class="flex-column-fill hidden">
        <div class="h100 flex-row flex-row-stretch">
            <el-aside width="200px" style="overflow:hidden; margin:0 10px 0 0px; background-color:#FFF;">
                <el-scrollbar wrap-style="overflow-x:hidden;" style="height:100%;">
                    <el-menu ref="menu" :default-active="now.root" :unique-opened="true" :router="true">
                        <template v-for="oneMenu in menuList">
                            <el-menu-item v-if="oneMenu.children.length==0" :index="oneMenu.path"><i class="el-icon-menu"></i>{{oneMenu.name}}</el-menu-item>
                            <el-submenu v-else :index="oneMenu.id">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{oneMenu.name}}</span>
                                </template>
                                <template v-for="twoMenu in oneMenu.children">
                                    <template v-if="twoMenu.children.length>0">
                                        <el-submenu :index="twoMenu.id">
                                            <template slot="title">
                                                {{twoMenu.name}}
                                            </template>
                                            <el-menu-item :index="threeMenu.path" v-for="threeMenu in twoMenu.children">{{threeMenu.name}}</el-menu-item>
                                        </el-submenu>
                                    </template>
                                    <el-menu-item v-else :index="twoMenu.path">
                                        <span>{{twoMenu.name}}</span>
                                    </el-menu-item>
                                </template>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <div class="flex-row-fill">
                <div class="h100 hidden flex-column">
                    <div class="flex-column-fill hidden bg-white">
                        <div class="h100">
                            <transition name="fade">
                                <keep-alive :include="tabs.map(function(x){return x.component;})">
                                    <router-view></router-view>
                                </keep-alive>
                            </transition>
                        </div>
                    </div>
                    <div class="flex-row">
                        @*底部*@
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="_MenuTpl" type="text/x-template">
    <div class="h100 box hidden-x">
        <el-card class="margin-8 menu-card" v-for="oneMenu in menuList" body-style="padding:0px;">
            <div slot="header" class="clearfix color-blue">
                <span v-if="oneMenu.children.length>0">{{oneMenu.name}}</span>
                <router-link v-else class="color-blue" style="text-decoration: none;" :to="oneMenu.path"><i class="el-icon-collection-tag"></i>{{oneMenu.name}}</router-link>
            </div>
            <div class="flex-row flex-row-stretch" style="flex-wrap:wrap;">
                <template v-for="twoMenu in oneMenu.children">
                    <template v-if="twoMenu.children.length>0">
                        <div style="border-right: 2px solid #ebeef5; padding: 4px 10px;">
                            <div style="display: grid; grid-template-rows: repeat(3, 18px); grid-auto-flow: column; grid-gap: 3px 15px;">
                                <router-link style="font-size: 13px; color: #303133; text-decoration: none;" v-for="threeMenu in twoMenu.children" :to="threeMenu.path"><i class="el-icon-collection-tag color-grey"></i>{{threeMenu.name}}</router-link>
                            </div>
                            <div style="text-align: center; padding: 4px; font-size: 14px; letter-spacing: 2px; color: rgb(30, 159, 255);">{{twoMenu.name}}</div>
                        </div>
                    </template>
                    <template v-else>
                        <div style="border-right: 1px solid #ebeef5; padding: 4px 10px;">
                            <router-link style="font-size: 13px; color: #303133; text-decoration: none;" :to="twoMenu.path"><i class="el-icon-collection-tag color-grey"></i>{{twoMenu.name}}</router-link>
                        </div>
                    </template>
                </template>
            </div>
        </el-card>
    </div>
</script>
@section body{
    <script src="~/Content/index/vue/vue-router.js"></script>
    <script src="~/Content/index/vue/vxe-table/xe-utils.js"></script>
    <script src="~/Content/index/vue/vxe-table/vxe-table.js"></script>
    <script src="~/Content/index/xlsx/xlsx.extendscript.js"></script>
    <script src="~/Content/index/xlsx/xlsx.full.min.js"></script>
    @*<script src="~/Views/pc/index.js"></script>*@
    @System.Web.Optimization.Scripts.Render("~/Content/pc/index?rd=" + DateTime.Now.ToString())

    <script type="text/javascript">
        window.$jscript.fn.ready({ link: '@(Url.Content("~/"))'});
    </script>

    <script type="text/javascript">
            window.$jscript.fn.pc.ready({
                optor: '@(currentUser.Obj.xConvertObjectToJson(false).xToBase64())',
                link: '@(Url.Content("~/"))',
                key:'@openkey'
            });
    </script>
}
